<template>
  <div>
    <el-dialog
      title="绑定客户经理"
      :visible.sync="detailVisible"
      width="600px"
      :before-close="handleClose"
    >
      <div style="height: 500px; white-space: nowrap;">
        <div style="display: flex; align-items: center; width: 100%;">
          <div style="width: 15%; text-align: right; margin-right: 15px;">
            <span style="">手机号：</span>
          </div>
          <div style="width: 80%;">
            <el-input
              clearable
              style="width: 300px; margin-right: 10px;"
              maxlength="11"
              v-model="phone"
              placeholder="请输入手机号"
            ></el-input>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="searchUser"
              >搜索</el-button
            >
          </div>
        </div>

        <div class="user-box" v-if="Object.keys(userInfo).length > 0">
          <div class="user-box-v">
            <div class="user-box--v-title">头像：</div>
            <div class="fuser-box--v-content">
              <el-image
                style="width: 60px; height: 60px"
                :src="userInfo.icon"
                :preview-src-list="[userInfo.icon]"
              >
              </el-image>
            </div>
          </div>
          <div class="user-box-v">
            <div class="user-box--v-title">昵称：</div>
            <div class="user-box--v-content">{{ userInfo.nickName }}</div>
          </div>
          <div class="user-box-v">
            <div class="user-box--v-title">性别：</div>
            <div class="fuser-box--v-content">
              {{ userInfo.gender | genderFilter }}
            </div>
          </div>

          <div class="user-box-v">
            <div class="user-box--v-title">手机号：</div>
            <div class="fuser-box--v-content">
              {{ userInfo.phoneNumber }}
            </div>
          </div>
          <div class="user-box-v">
            <div class="user-box--v-title">部门名称：</div>
            <div class="fuser-box--v-content">
              {{ userInfo.deptName }}
            </div>
          </div>

          <div style="text-align: center; margin-top: 50px; margin-bottom: 50px;">
            <el-button @click="confirmBind()" type="primary"
              >确认绑定</el-button
            >
          </div>
        </div>
        <el-empty v-else description="暂无客户经理哦！"></el-empty>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUserByPhone, bindUserById } from "@/api/member";
export default {
  name: "editUserMember",
  filters: {
    genderFilter(value) {
      const sexMap = {
        "0": "未知",
        "1": "男",
        "2": "女"
      };
      return sexMap[value];
    },
   
  },
  data() {
    return {
      detailVisible: false,
      phone: "",
      id: null,
      userInfo: {}
    };
  },
  methods: {
    confirmBind() {
      let that = this;
      this.$confirm("确认绑定该系统账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          bindUserById({ id: this.id, adminId: this.userInfo.adminId }).then(
            res => {
              that.$message.success("绑定成功");
              that.handleClose()
            }
          );
        })
        .catch(() => {});
    },
    openLog(v) {
      console.log(v);
      this.id = v.id;
      this.detailVisible = true;
    },
    searchUser() {
      let reg = /^1[3456789]\d{9}$/;
      if (this.phone && reg.test(this.phone.trim())) {
        getUserByPhone(this.phone).then(res => {
          this.userInfo = res.data;
        }).catch(err=> {
              this.userInfo = {}
        });
        
      } else {
        this.$message.warning("请输入正确的手机号");
      }
    },
    handleClose() {
        this.phone = ''
      this.detailVisible = false;
      this.userInfo = {};
    }
  }
};
</script>

<style lang="scss" scoped>

/deep/ .el-dialog__header {
    border-bottom: 1px solid #dcdfe6;
    padding-bottom: 20px !important;
}
.user-box {
  border: 1px solid #eee;
  margin-top: 20px;
  border-radius: 10px;
  .user-box-v {
    display: flex;
    width: 100%;
    margin: 20px 0;
    .user-box--v-title {
      text-align: right;
      width: 15%;
      line-height: 20px;
      margin-right: 15px;
    }
    .fuser-box--v-content {
      width: 85%;
      line-height: 20px;
    }
    .refer-bg {
      background-color: #f5f5f5;
      padding: 10px;
      border-radius: 5px;
    }
  }
}
</style>
